<template>
  <div>
    <div class="kill_wrap">
      <div class="kill_title">
        <div>
          <span>京东秒杀</span>
          <span class="time">{{timeObj.now}}点场</span>
          <span class="hours">{{timeObj.h}}</span>:
          <span class="minutes">{{timeObj.m}}</span>:
          <span class="second">{{timeObj.s}}</span>
        </div>
        <div>更多秒杀</div>
      </div>
      <div class="kill_product">
        <van-swipe :show-indicators="false"
                   width="90"
                   :loop="false"
                   @change="swipeChange">
          <van-swipe-item v-for="(item,index) in hotgoods"
                          :key="index">
            <div class="kill_one">
              <img :src="item.image"
                   alt="">
              <p>￥{{item.price}}</p>
              <del>{{item.old_price}}</del>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>
<script>
import { Dao } from '../../utils/tool'
export default {
  props: ["hotgoods"],
  data () {
    return {
      timeObj: {}
    }
  },
  methods: {
    swipeChange (index) { //index  当前显示的下标
      console.log(index)
      if (index >= this.hotgoods.length - 5) {
        this.$router.push("/category");
      }
    }
  },
  created () {
    setInterval(() => {
      this.timeObj = Dao()
    }, 1000)
  }
}
</script>
<style lang="less">
.kill_wrap {
  background: white;
  margin-top: 10px;
  .kill_title {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .minutes,
    .hours,
    .second {
      margin-left: 10px;
      padding: 0 15px;
      background: red;
      color: white;
    }
    .time {
      margin-left: 10px;
      color: red;
    }
  }
}
.kill_product {
  height: 200px;
  .kill_one {
    width: 200px;
    height: 200px;
    margin-left: 20px;
    text-align: center;
    img {
      width: 170px;
      height: 150px;
    }
    p {
      color: red;
    }
  }
}
</style>